
[#include "single/layout/layout02/layout.ftl"/]
[@htmlHead]
<link href="${jpath}/assets/public/plugins/jqGrid/css/ui.jqgrid-bootstrap.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
    .ui-jqgrid-view {
        overflow-x: hidden
    }

    #jqGridPager_left {
        width: 5px!important;
    }
</style>
[/@htmlHead]

[@htmlBody]


<div class="row" style="overflow-y: auto;height: 380px; overflow-x: hidden;">
    <input name="roleId" id="roleId" value="${id}" type="hidden"/>

    <div class="col-xs-12">
        <table id="jqGrid" class="table  table-bordered table-hover"></table>
        <div id="jqGridPager"></div>
    </div>
</div>
<div class="row navbar-fixed-bottom">
    <div class="col-xs-12 text-center">
        <input type="button" class="btn btn-info btn-sm" value="确定" onclick="doInfo()"/>
        <input type="button" class="btn btn-cancle  btn-sm" value="关闭" onclick="$.bootbox.hideAll()"/>
    </div>
</div>

[/@htmlBody]

[@htmlFoot]
<script type="text/javascript" src="${jpath}/assets/public/plugins/jqGrid/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="${jpath}/assets/public/plugins/dialog/bootbox.js"></script>
<script type="text/javascript" src="${jpath}/assets/public/plugins/jqGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="${jpath}/assets/public/plugins/jqGrid/jqGrid-extends.js"></script>
<script type="text/javascript" src="${jpath}/assets/public/component.js"></script>
<script type="text/javascript">
    var id = $("#roleId").val();
    $(document).ready(function () {
        $("#jqGrid").jqGrid($.extend(jqGrids.defaults, {
            url: '${base}/app/list/normal?exclude=' + getQueryString('exclude'),
            colNames: ['', '名称', '编码', '描述', '创建时间'],
            colModel: [
                {
                    name: 'appNameCode',
                    index: 'appNameCode',
                    width: 30,
                    formatter: function (cellvalue, options, rowObject) {
                        return "<input type='radio' id='r_" + rowObject.id + "' value='" + cellvalue + "' name='appNameCode' onclick=\"doSelectRow('" + rowObject.id + "')\" />";
                    }
                },
                {name: 'appName', index: 'appName'},
                {name: 'appNameCode', index: 'appNameCode'},

                {name: 'createTime', index: 'createTime', formatter: tools.fomDate},
                {name: 'description', index: 'description', width: 150}
            ],
            onSelectRow: function (id, stat) {
                $("#r_" + id).prop("checked", stat);
            },
            multiselect: false,
            autowidth: true,
            height: 'auto'
        }))
    });
    function doSelectRow(id) {
        $("#jqGrid").jqGrid('setSelection', id);
    }


    function doInfo() {
        var id = $('#jqGrid').getGridParam("selrow");//获得被选中行
        var code = $("#" + id).find("td:eq(2)").html();  //获得被选中行的code
        var name = $("#" + id).find("td:eq(1)").html();//获得被选中行的name
        var idField = getQueryString('idField');
        var textField = getQueryString('textField');
        var fn = getQueryString('fn');
        if (typeof fn == 'function') {
            eval("top." + fn + "(" + code + "," + name + ")");
        } else {
            var contentFrame = getCurrentFrame();

            if (contentFrame) {
                var contentFrameDoc = contentFrame.document;
                $("#" + idField, contentFrameDoc).val(code);
                $("#" + textField, contentFrameDoc).val(name);
            } else {
                $("#" + idField, top.window.document).val(code);
                $("#" + textField, top.window.document).val(name);
                $("#" + textField, top.window.document).blur();
            }
            $.bootbox.hideAll();
        }
    }


</script>

[/@htmlFoot]